<template>
    <div>
        <el-dialog
            :visible.sync="is_show"
            title="结算详情"
            center
            width="600px"
        >
            <div class="item-wrap">
                <!-- <div class="item">
                    <div class="title">结算信息</div>
                    <div class="line">
                        <span>案件名称：</span>
                        <div>{{final_info.name}}</div>
                    </div>
                    <div class="line">
                        <span>订单编号：</span>
                        <div>{{final_info.order_number}}</div>
                    </div>
                    <div class="line">
                        <span>专利类型：</span>
                        <div>{{order_info.type}}</div>
                    </div>
                </div> -->
                <div class="item" v-if="order_info.deduction && order_info.deduction.length > 0">
                    <div class="title" >扣款详情</div>
                    <el-table
                        class="detail-table"
                        :data="order_info.deduction"
                        border
                        max-height="250"
                        style="width: 100%">
                        <el-table-column
                        prop="name"
                        label="扣款原因"
                        show-overflow-tooltip

                        >
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="deduction_price"
                            show-overflow-tooltip
                            label="扣款金额">
                            <template slot-scope="scope">
                                <span class="font_danger">{{ scope.row.deduction_price }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="appeal"
                            show-overflow-tooltip
                            label="申诉结果">
                            <template slot-scope="scope">
                                <template v-if="scope.row.appeal">
                                    <span>{{ scope.row.appeal.status  | deductionsAppeal }}</span>
                                </template>
                                <span v-else>未申诉</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                type="primary"
                                size="mini"
                                :disabled="scope.row.appeal != null"
                                @click="deductionAppeal(scope.row)">申诉</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <div class="line">
                        <span>结算类型：</span>
                        <div>
                            <span v-if="detail.settlement_type">
                                {{detail.settlement_type.id == 11 ? detail.settlement_type.name : detail.settlement_type.name.slice(-2)}}
                            </span>
                        </div>
                    </div>
                    <div class="line">
                        <span>结算状态：</span>
                        <div :class="finalList[detail.status-1] == '未结算' ? 'unfinish' : 'finish'">
                            {{finalList[detail.status-1]}}
                        </div>
                    </div>
                    <div class="line">
                        <span>{{detail.status==1 ? '结算' : '定稿'}}时间：</span>
                        <div v-if="detail.updated_at">
                            {{detail.status == 1 ? detail.updated_at.split(' ')[0] : detail.created_at.split(' ')[0]}}
                        </div>
                    </div>
                    <div class="line">
                        <span>结算金额：</span>
                        <div v-if="detail.settlement_type">
                            {{detail.settlement_type.settlements_price}}元
                        </div>
                    </div>
                    <div class="line">
                        <span>扣款情况：</span>
                        <div class="unfinish">{{detail.deduction}}元</div>
                    </div>
                    <div class="line" v-if="order_info.deduction && order_info.deduction.length > 0">
                        <span>扣款详情：</span>
                        <div></div>
                    </div>
                    <div v-for="(item, index) in order_info.deduction" :key="index" class="reason unfinish">
                        <div class="line">
                            <span>扣款原因：</span>
                            <div>{{item.name}}</div>
                        </div>
                        <div class="line">
                            <span>扣款金额：</span>
                            <div>{{item.deduction_price}}元</div>
                        </div>
                    </div>
                    <div class="line">
                        <span>案件奖励：</span>
                        <div class="finish">{{detail.reward}}元</div>
                    </div>
                    <div class="line">
                        <span>实际结算：</span>
                        <div>
                            {{(Number(detail.settlement_type && detail.settlement_type.settlements_price) + Number(detail.reward) - Number(detail.deduction)).toFixed(2)}}元
                        </div>
                    </div> -->
                </div>
                <div class="item clearfloat" v-if="detail && detail.final && detail.final.order && detail.final.order.is_distribution == 3">
                    <div class="title">缴费详情</div>
                    <!-- <div>缴费凭证</div> -->
                    <div class="line" >
                        <span>缴费状态：</span>
                        <div :class="detail.final.consumer_pay_status == 2 ? 'font_danger' : 'font_success'">
                            {{ detail.final.consumer_pay_status | payStatus }}
                        </div>
                    </div>
                    <div class='fl'  style="display: flex; align-item: center">
                        <span v-if="detail.final.consumer_pay_img != null">缴费凭证：</span>
                        <el-image
                        v-if="detail.final.consumer_pay_img_thumb != null"
                        :src="baseUrl + '/storage/upload/' + detail.final.consumer_pay_img_thumb"
                        :preview-src-list="[baseUrl + '/storage/upload/' + detail.final.consumer_pay_img]"
                        ></el-image>
                    </div>
                    <div class='operate tr'>
                        <!-- <el-button
                            :disabled="(detail.final.status != '等待提交国知局' && detail.final.status != '已提交国知局' && detail.final.status == '撤案')
                            || detail.final.consumer_pay_status != 2
                            || detail.final.consumer_pay_img != null"
                            type="primary"
                            size="small"
                            @click="upBill(detail.final)">线下支付
                        </el-button> -->
                        <el-popover
                            placement="left"
                            width="150"
                            trigger="click">
                            <el-button
                                v-if="detail.final.consumer_pay_status == 2"
                                type="warning"
                                size='small'
                                @click="goPay(detail.final)">在线支付
                            </el-button>
                            <br/>
                            <el-button
                                v-no-more-click:3000
                                class="mt10"
                                @click.stop="upBill(detail.final)"
                                type="primary"
                                size="small"
                                :disabled="(detail.final.status != '等待提交国知局' && detail.final.status != '已提交国知局' && detail.final.status == '撤案') || detail.final.consumer_pay_status != 2 || detail.final.consumer_pay_img != null">
                                已&nbsp; 缴&nbsp; 费
                            </el-button>
                            <el-popover
                                placement="top"
                                title="缴费截图"
                                width="200"
                                trigger="hover">
                                <span>请上传您的支付截图作为缴费凭证。</span>
                                <i class='el-icon-info orange ml10' slot="reference"></i>
                            </el-popover>


                            <el-button
                                v-if="detail.final.consumer_pay_status == 2"
                                slot="reference"
                                type="primary"
                                :disabled="(detail.final.status != '等待提交国知局' && detail.final.status != '已提交国知局' && detail.final.status == '撤案') || detail.final.consumer_pay_status != 2 || detail.final.consumer_pay_img != null">
                                {{ detail.final.consumer_pay_status == 2 ? '去支付' : '已缴费' }}
                            </el-button>
                        </el-popover>
                    </div>
                </div>
                <div class="item" v-if="detail && detail.final && detail.final.grades">
                    <div class="title">客户评价</div>
                    <div class="operate-wrap">
                        <div class="info">
                            <div class="line">
                                <span>服务态度分：</span>
                                <div>
                                    <el-rate
                                        show-score
                                        disabled
                                        allow-half
                                        v-model="detail.final.grades.attitude">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="line">
                                <span>撰写质量分：</span>
                                <div>
                                    <el-rate
                                        show-score
                                        disabled
                                        allow-half
                                        v-model="detail.final.grades.quelity">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="line">
                                <span>撰写耗时分：</span>
                                <div>
                                    <el-rate
                                        show-score
                                        disabled
                                        allow-half
                                        v-model="detail.final.grades.take_time">
                                    </el-rate>
                                </div>
                            </div>
                            <div class="line">
                                <span>总分：</span>
                                <div>
                                    <!-- <el-rate
                                        show-score
                                        disabled
                                        allow-half
                                        v-model="detail.final.grades.total_score">
                                    </el-rate> -->
                                    <span :class="detail.final.grades.total_score >= 7.5 ? 'font_success' : 'font_warning'">{{ detail.final.grades.total_score }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="operate tr gradesbtn" v-if="detail.final.grades.appeal == 0">
                            <el-popover
                                placement="left-start"
                                title="申诉说明"
                                width="250"
                                trigger="hover"
                                content="您可以针对每个评分项目进行申诉，但是要注意的是低于2.5分的项目才能申诉！申诉成功后，评分将不计入您的评分统计。">
                                <i slot="reference" class='el-icon-question description'></i>
                            </el-popover>
                            <!-- <el-button class='description' type="warning" icon="el-icon-question" circle></el-button> -->

                            <el-button type="primary" size="mini" :disabled="detail.final.grades.quelity >= 2.5 && detail.final.grades.attitude >= 2.5 && detail.final.grades.take_time >= 2.5" @click="apply">申诉</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <apply-form ref="apply-form" @refresh="refresh"></apply-form>
        <upload-fee ref="upload-fee" @refresh="refresh"></upload-fee>
        <deductionAppeal ref="deductionAppeal" @refresh="refresh"></deductionAppeal>
    </div>
</template>

<script>
import deductionAppeal from './deduction-appeal'
import applyForm from './apply-form'
import uploadFee from './upload-fee'
export default {
    components: {
        applyForm,
        uploadFee,
        deductionAppeal
    },
    data() {
        return {
            is_show: false,
            settlement_id: null,
            finalList: ['已结算', '未结算'],
            order_info: {},
            final_info: {},
            detail: {},
            baseUrl: global.baseurl,
            showBtns: true
        }
    },
    watch: {
    },
    methods: {
        goPay(data) {
            this.$router.replace({
                name: 'payment',
                query: {
                finals_id: data.id,
                order: data.order.id,
                from: this.$route.path
                }
            })
        },
        refresh() {
            this.is_show = false
            this.$emit('refresh')
        },
        showOn(id) {
            this.settlement_id = id
            this.getInfo()
        },
        getInfo() {
            this.$axios.get(`api/settlement/${this.settlement_id}`).then(res => {
                if (res.data.code == 200) {
                    this.final_info = res.data.data.final
                    this.order_info = res.data.data.final.order
                    this.detail = res.data.data
                    if (this.detail && this.detail.final && this.detail.final.grades) {
                        this.detail.final.grades.attitude = Number(this.detail.final.grades.attitude)
                        this.detail.final.grades.quelity = Number(this.detail.final.grades.quelity)
                        this.detail.final.grades.take_time = Number(this.detail.final.grades.take_time)
                    }
                    if (!this.detail.final.grades && this.order_info.deduction.length == 0 && this.order_info.is_distribution != 3) {
                        this.$alert('该结算暂无详情！', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        })
                    } else {
                        this.is_show = true
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        upBill(row) {
            this.$refs['upload-fee'].showOn(row)
        },
        apply() {
            this.$refs['apply-form'].showOn(this.detail.final.grades)
        },
        deductionAppeal(data){
            this.$refs['deductionAppeal'].show(data)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-top: 10px;
    }
    .item-wrap {
        .item {
            .title {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bold;
                color: #0077FF;
                position: relative;
                padding-left: 20px;
                &::before {
                    content: '';
                    position: absolute;
                    background-color: #0077FF;
                    width: 5px;
                    height: 25px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-57%);
                }
            }
            .line {
                display: flex;
                align-items: center;
                span {
                    flex: 0 0 100px;
                    // text-align: justify;
                    // text-align-last: justify;
                }
                div {
                    flex: 1;
                }
            }
            .reason {
                background-color: #efefef;
                padding: 5px;
                margin-left: 20px;
                margin-bottom: 10px;
                &::nth-last-child {
                    margin-bottom: 0px;
                }
            }
            .gradesbtn {
                margin-right: 40px;
            }
            .operate-wrap {
                display: flex;
                align-items: center;
                .info {
                    flex: 1;
                }
                .operate {
                    flex: 0 0 100px;
                }
            }
        }
        .el-table {
            min-height: auto !important;
        }
    }
    .description {
        font-size: 18px;
        margin-right: 10px;
    }
}
</style>
